<!DOCTYPE html>
<html class="no-js">
<head>
  <title>{% block title %}{% endblock %}</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <link rel="stylesheet" href="{{ asset_url('server.css') }}">
  <style type="text/css">
    .tabs {
      display: block;
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      -webkit-flex-wrap: wrap;
      -moz-flex-wrap: wrap;
      flex-wrap: wrap;
      margin: 0;
      overflow: hidden; }
      /* .tabs [class^="tab"] label,
      .tabs [class*=" tab"] label {
        cursor: pointer;
        display: block;
        font-size: 1.1em;
        font-weight: 300;
        line-height: 1em;
        padding: 2rem 0;
        text-align: center; } */
      .tabs [class^="tab"] [type="radio"],
      .tabs [class*=" tab"] [type="radio"] {
    /*     border-bottom: 1px solid rgba(239, 237, 239, 0.5); */
        cursor: pointer;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        display: block;
        width: 100%;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out; }
        .tabs [class^="tab"] [type="radio"]:hover, .tabs [class^="tab"] [type="radio"]:focus,
        .tabs [class*=" tab"] [type="radio"]:hover,
        .tabs [class*=" tab"] [type="radio"]:focus {
    /*    tab标签选中的颜色标志      */
          border-bottom: 1px solid #40a9ff;
    }
        .tabs [class^="tab"] [type="radio"]:checked,
        .tabs [class*=" tab"] [type="radio"]:checked {
          border-bottom: 2px solid #40a9ff; 
    }
        .tabs [class^="tab"] [type="radio"]:checked + div,
        .tabs [class*=" tab"] [type="radio"]:checked + div {
          opacity: 1; }
        .tabs [class^="tab"] [type="radio"] + div,
        .tabs [class*=" tab"] [type="radio"] + div {
          display: block;
          opacity: 0;
          padding: 2rem 0;
          width: 90%;
          -webkit-transition: all 0.3s ease-in-out;
          -moz-transition: all 0.3s ease-in-out;
          -o-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out; }
      .tabs .tab-2 {
        width: 50%; }
        .tabs .tab-2 [type="radio"] + div {
          width: 200%;
          margin-left: 200%; }
        .tabs .tab-2 [type="radio"]:checked + div {
          margin-left: 0; }
        .tabs .tab-2:last-child [type="radio"] + div {
          margin-left: 100%; }
        .tabs .tab-2:last-child [type="radio"]:checked + div {
          margin-left: -100%; }
        </style>
  <link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/static/images/favicon-96x96.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicon-16x16.png">
  {% block head %}{% endblock %}
</head>
<body class="d-flex flex-column justify-content-center align-items-center signed-out">

  <div>
    <!-- <div class="header">
      <div class="text-center m-b-15">
        <a href="/"><img src="/static/images/redash_icon_small.png"></a>
      </div>
      {% if not hide_page_header %}
        <h3 class="text-center m-t-0 m-b-25">{{ self.title() }}</h3>
      {% endif %}
    </div> -->
    {% block content %}{% endblock %}
  </div>

{% block scripts %}{% endblock %}

{% include '_includes/signed_out_tail.html' %}

</body>
</html>
